<script lang='ts' setup name='DepartmentList'>
import { ref } from 'vue'
import axios from "axios";
import http from "@/utils/request";
import { ElMessage } from 'element-plus'

import  DeprtmentEdit  from "./edit.vue";
import type { Department } from "@/api/types";



const tableData = ref<Department[]>([])
const show = ref(false)

//待修改的id
let editId:number;

function handleEdit(index: number, row: Department) {
  editId = row.id as number
  
  show.value = true
 

}


function handleDelete(index: number, row: Department) {



  //调用axios对象 
  const url = '/dept/removeById/' + row.id

  http.get<boolean>(url).then(data => {

    if (data) {
      ElMessage({ message: '删除成功', type: 'success', })
      load()
    } else {
      ElMessage({ message: '删除失败了', type: 'error', })
    }

  })
    .catch(error => { })
}



function load() {

  //调用axios对象 
  const url = '/dept/list'

  //then 请求成功  then
  //
  http.get<Department[]>(url)
    .then(data => {   tableData.value = data  })
    .catch(error => { })
}

function add(){
  show.value = true
}

//关闭dialog
function  clostDialog(){
  load();
  show.value = false
}


//查询数据
load();




</script>

<template>


  <el-button @click="add">添加</el-button>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="id"  prop="id"> </el-table-column>
    <el-table-column label="name"  prop="name"> </el-table-column>
    <el-table-column label="address" prop="address"> </el-table-column>
    <el-table-column label="leader" width="180" prop="leader"> </el-table-column>
    <el-table-column label="active" width="180" prop="active"> </el-table-column>
    <el-table-column label="createTime" width="280" prop="createTime"> </el-table-column>


    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>


  <el-dialog  v-model="show" title="编辑"  width="500" >
       <DeprtmentEdit v-if="show" :clostDialog="clostDialog" :id="editId"> </DeprtmentEdit>
  </el-dialog>


</template>

<style scoped></style>